<template>
  <baseLayout title="图标集合">
    <ul class="iconList">
      <li v-for="(item, index) in list" :key="index">
        <div>
          <div class="icon">
            <span :class="item"></span>
          </div>
          <p class="name">{{ item }}</p>
        </div>
      </li>
    </ul>
  </baseLayout>
</template>

<script>
export default {
  name: "icon",
  data() {
    return {
      list: [
        "icon-e-query",
        "icon-e-arrow-up1",
        "icon-e-arrow-left1",
        "icon-e-arrow-down1",
        "icon-e-arrow-right1",
        "icon-e-page-up",
        "icon-e-page-right",
        "icon-e-page-down",
        "icon-e-page-left",
        "icon-e-turning-up",
        "icon-e-turning-right",
        "icon-e-turning-down",
        "icon-e-turning-left",
        "icon-e-pic",
        "icon-e-camera-fill",
        "icon-e-Notvisible",
        "icon-e-good-fill",
        "icon-e-play",
        "icon-e-image-text-fill",
        "icon-e-rising",
        "icon-e-inspection-fill",
        "icon-e-QRcode",
        "icon-e-hot-fill",
        "icon-e-rmb",
        "icon-e-company-fill",
        "icon-e-similar-product",
        "icon-e-discount-fill",
        "icon-e-Exportservices",
        "icon-e-insurance-fill",
        "icon-e-sendinquiry",
        "icon-e-inquiry-template-fill",
        "icon-e-all-fill",
        "icon-e-leftbutton-fill",
        "icon-e-favorites-fill",
        "icon-e-integral-fill1",
        "icon-e-integral-fill",
        "icon-e-help1",
        "icon-e-namecard-fill",
        "icon-e-listing-content-fill",
        "icon-e-pic-fill",
        "icon-e-logistic-logo-fill",
        "icon-e-play-fill",
        "icon-e-Moneymanagement-fill",
        "icon-e-prompt-fill",
        "icon-e-manage-order-fill",
        "icon-e-stop-fill",
        "icon-e-multi-language-fill",
        "icon-e-column",
        "icon-e-logistics-icon-fill",
        "icon-e-add-account",
        "icon-e-Newuserzone-fill",
        "icon-e-column1",
        "icon-e-nightmode-fill",
        "icon-e-add",
        "icon-e-office-supplies-fill",
        "icon-e-agriculture",
        "icon-e-notice-fill",
        "icon-e-years",
        "icon-e-mute",
        "icon-e-add-cart",
        "icon-e-order-fill",
        "icon-e-arrow-right",
        "icon-e-password1",
        "icon-e-arrow-left",
        "icon-e-map1",
        "icon-e-apparel",
        "icon-e-paylater-fill",
        "icon-e-all1",
        "icon-e-phone-fill",
        "icon-e-arrow-up",
        "icon-e-online-tracking-fill",
        "icon-e-ascending",
        "icon-e-play-fill1",
        "icon-e-ashbin",
        "icon-e-pdf-fill",
        "icon-e-atm",
        "icon-e-phone1",
        "icon-e-bad",
        "icon-e-pin-fill",
        "icon-e-attachent",
        "icon-e-product-fill",
        "icon-e-browse",
        "icon-e-rankinglist-fill",
        "icon-e-beauty",
        "icon-e-reduce-fill",
        "icon-e-atm-away",
        "icon-e-reeor-fill",
        "icon-e-assessed-badge",
        "icon-e-pic-fill1",
        "icon-e-auto1",
        "icon-e-rankinglist",
        "icon-e-bags",
        "icon-e-product1",
        "icon-e-calendar",
        "icon-e-prompt-fill1",
        "icon-e-cart-full",
        "icon-e-resonserate-fill",
        "icon-e-calculator",
        "icon-e-remind-fill",
        "icon-e-cameraswitching",
        "icon-e-Rightbutton-fill",
        "icon-e-cecurity-protection",
        "icon-e-RFQ-logo-fill",
        "icon-e-category",
        "icon-e-RFQ-word-fill",
        "icon-e-close",
        "icon-e-searchcart-fill",
        "icon-e-certified-supplier",
        "icon-e-salescenter-fill",
        "icon-e-cart-Empty",
        "icon-e-save-fill",
        "icon-e-code1",
        "icon-e-security-fill",
        "icon-e-color",
        "icon-e-Similarproducts-fill",
        "icon-e-conditions",
        "icon-e-signboard-fill",
        "icon-e-confirm",
        "icon-e-service-fill",
        "icon-e-company",
        "icon-e-shuffling-banner-fill",
        "icon-e-ali-clould",
        "icon-e-supplier-features-fill",
        "icon-e-copy1",
        "icon-e-store-fill",
        "icon-e-credit-level",
        "icon-e-smile-fill",
        "icon-e-coupons",
        "icon-e-success-fill",
        "icon-e-connections",
        "icon-e-sound-filling-fill",
        "icon-e-cry",
        "icon-e-sound-Mute1",
        "icon-e-costoms-alearance",
        "icon-e-suspended-fill",
        "icon-e-clock",
        "icon-e-tool-fill",
        "icon-e-CurrencyConverter",
        "icon-e-task-management-fill",
        "icon-e-cut",
        "icon-e-unlock-fill",
        "icon-e-data1",
        "icon-e-trust-fill",
        "icon-e-Customermanagement",
        "icon-e-vip-fill",
        "icon-e-descending",
        "icon-e-set1",
        "icon-e-double-arro-right",
        "icon-e-Top-fill",
        "icon-e-customization",
        "icon-e-viewlarger1",
        "icon-e-double-arrow-left",
        "icon-e-voice-fill",
        "icon-e-discount",
        "icon-e-warning-fill",
        "icon-e-download",
        "icon-e-warehouse-fill",
        "icon-e-dollar1",
        "icon-e-zip-fill",
        "icon-e-default-template",
        "icon-e-trade-assurance-fill",
        "icon-e-editor1",
        "icon-e-vs-fill",
        "icon-e-eletrical",
        "icon-e-video1",
        "icon-e-electronics",
        "icon-e-template-fill",
        "icon-e-etrical-equipm",
        "icon-e-wallet1",
        "icon-e-ellipsis",
        "icon-e-training1",
        "icon-e-email",
        "icon-e-packing-labeling-fill",
        "icon-e-falling",
        "icon-e-Exportservices-fill",
        "icon-e-earth",
        "icon-e-brand-fill",
        "icon-e-filter",
        "icon-e-collection",
        "icon-e-furniture",
        "icon-e-consumption-fill",
        "icon-e-folder",
        "icon-e-collection-fill",
        "icon-e-feeds",
        "icon-e-brand",
        "icon-e-history1",
        "icon-e-rejected-order-fill",
        "icon-e-hardware",
        "icon-e-homepage-ads-fill",
        "icon-e-help",
        "icon-e-homepage-ads",
        "icon-e-good",
        "icon-e-scenes-fill",
        "icon-e-Householdappliances",
        "icon-e-scenes",
        "icon-e-gift1",
        "icon-e-similar-product-fill",
        "icon-e-form",
        "icon-e-topraning-fill",
        "icon-e-image-text",
        "icon-e-consumption",
        "icon-e-hot",
        "icon-e-topraning",
        "icon-e-inspection",
        "icon-e-gold-supplier",
        "icon-e-leftbutton",
        "icon-e-messagecenter-fill",
        "icon-e-jewelry",
        "icon-e-quick",
        "icon-e-ipad",
        "icon-e-writing",
        "icon-e-leftarrow",
        "icon-e-docjpge-fill",
        "icon-e-integral1",
        "icon-e-jpge-fill",
        "icon-e-kitchen",
        "icon-e-gifjpge-fill",
        "icon-e-inquiry-template",
        "icon-e-bmpjpge-fill",
        "icon-e-link",
        "icon-e-tifjpge-fill",
        "icon-e-libra",
        "icon-e-pngjpge-fill",
        "icon-e-loading",
        "icon-e-Hometextile",
        "icon-e-listing-content",
        "icon-e-home",
        "icon-e-lights",
        "icon-e-sendinquiry-fill",
        "icon-e-logistics-icon",
        "icon-e-comments-fill",
        "icon-e-messagecenter",
        "icon-e-account-fill",
        "icon-e-mobile-phone",
        "icon-e-feed-logo-fill",
        "icon-e-manage-order",
        "icon-e-feed-logo",
        "icon-e-move",
        "icon-e-home-fill",
        "icon-e-Moneymanagement",
        "icon-e-add-select",
        "icon-e-namecard",
        "icon-e-sami-select",
        "icon-e-map",
        "icon-e-camera",
        "icon-e-Newuserzone",
        "icon-e-arrow-down",
        "icon-e-multi-language",
        "icon-e-account",
        "icon-e-office",
        "icon-e-comments",
        "icon-e-notice",
        "icon-e-cart-Empty1",
        "icon-e-ontimeshipment",
        "icon-e-favorites",
        "icon-e-office-supplies",
        "icon-e-order",
        "icon-e-password",
        "icon-e-search",
        "icon-e-Notvisible1",
        "icon-e-trade-assurance",
        "icon-e-operation",
        "icon-e-usercenter1",
        "icon-e-packaging",
        "icon-e-tradingdata",
        "icon-e-online-tracking",
        "icon-e-microphone",
        "icon-e-packing-labeling",
        "icon-e-txt",
        "icon-e-phone",
        "icon-e-xlsx",
        "icon-e-pic1",
        "icon-e-banzhengfuwu",
        "icon-e-pin",
        "icon-e-cangku",
        "icon-e-play1",
        "icon-e-daibancaishui",
        "icon-e-logistic-logo",
        "icon-e-jizhuangxiang",
        "icon-e-print",
        "icon-e-jiaobiao",
        "icon-e-product",
        "icon-e-kehupandian",
        "icon-e-machinery",
        "icon-e-dongtai",
        "icon-e-process",
        "icon-e-daikuan",
        "icon-e-prompt",
        "icon-e-shengyijing",
        "icon-e-QRcode1",
        "icon-e-jiehui",
        "icon-e-reeor",
        "icon-e-fencengpeizhi",
        "icon-e-reduce",
        "icon-e-shenqingjilu",
        "icon-e-Non-staplefood",
        "icon-e-shangchuanbeiandanzheng",
        "icon-e-rejected-order",
        "icon-e-shangchuan",
        "icon-e-resonserate",
        "icon-e-kehuquanyi",
        "icon-e-remind",
        "icon-e-suoxiao",
        "icon-e-responsetime",
        "icon-e-quanyipeizhi",
        "icon-e-return",
        "icon-e-shuangshen",
        "icon-e-paylater",
        "icon-e-tongguan",
        "icon-e-rising1",
        "icon-e-tuishui",
        "icon-e-Rightarrow",
        "icon-e-tongguanshuju",
        "icon-e-rmb1",
        "icon-e-kuaidiwuliu",
        "icon-e-RFQ-logo",
        "icon-e-wuliuchanpin",
        "icon-e-save",
        "icon-e-waihuishuju",
        "icon-e-scanning",
        "icon-e-xinxibar_shouji",
        "icon-e-security",
        "icon-e-xinwaizongyewu",
        "icon-e-salescenter",
        "icon-e-wuliudingdan",
        "icon-e-seleted",
        "icon-e-zhongjianren",
        "icon-e-searchcart",
        "icon-e-xinxibar_zhanghu",
        "icon-e-raw",
        "icon-e-yidatong",
        "icon-e-service",
        "icon-e-zhuanyequanwei",
        "icon-e-share",
        "icon-e-zhanghucaozuo",
        "icon-e-signboard",
        "icon-e-xuanzhuandu",
        "icon-e-shuffling-banner",
        "icon-e-tuishuirongzi",
        "icon-e-Rightbutton",
        "icon-e-AddProducts",
        "icon-e-sorting",
        "icon-e-ziyingyewu",
        "icon-e-sound-Mute",
        "icon-e-addcell",
        "icon-e-Similarproducts",
        "icon-e-background-color",
        "icon-e-sound-filling",
        "icon-e-cascades",
        "icon-e-suggest",
        "icon-e-beijing",
        "icon-e-stop",
        "icon-e-bold",
        "icon-e-success",
        "icon-e-zijin",
        "icon-e-supplier-features",
        "icon-e-eraser",
        "icon-e-switch",
        "icon-e-centeralignment",
        "icon-e-survey",
        "icon-e-click",
        "icon-e-template",
        "icon-e-aspjiesuan",
        "icon-e-text",
        "icon-e-flag",
        "icon-e-suspended",
        "icon-e-falg-fill",
        "icon-e-task-management",
        "icon-e-Fee",
        "icon-e-tool",
        "icon-e-filling",
        "icon-e-Top",
        "icon-e-Foreigncurrency",
        "icon-e-smile",
        "icon-e-guanliyuan",
        "icon-e-textile-products",
        "icon-e-language",
        "icon-e-tradealert",
        "icon-e-leftalignment",
        "icon-e-topsales",
        "icon-e-extra-inquiries",
        "icon-e-tradingvolume",
        "icon-e-Italic",
        "icon-e-training",
        "icon-e-pcm",
        "icon-e-upload",
        "icon-e-reducecell",
        "icon-e-RFQ-word",
        "icon-e-rightalignment",
        "icon-e-viewlarger",
        "icon-e-pointerleft",
        "icon-e-viewgallery",
        "icon-e-subscript",
        "icon-e-vehivles",
        "icon-e-square",
        "icon-e-trust",
        "icon-e-superscript",
        "icon-e-warning",
        "icon-e-tag-subscript",
        "icon-e-warehouse",
        "icon-e-danjuzhuanhuan",
        "icon-e-shoes",
        "icon-e-Transfermoney",
        "icon-e-video",
        "icon-e-under-line",
        "icon-e-viewlist",
        "icon-e-xiakuangxian",
        "icon-e-set",
        "icon-e-shouqi",
        "icon-e-store",
        "icon-e-zhankai",
        "icon-e-tool-hardware",
        "icon-e-tongxunlu",
        "icon-e-vs",
        "icon-e-yiguanzhugongyingshang",
        "icon-e-toy",
        "icon-e-goumaipianhao",
        "icon-e-sport",
        "icon-e-Subscribe",
        "icon-e-creditcard",
        "icon-e-becomeagoldsupplier",
        "icon-e-contacts",
        "icon-e-new",
        "icon-e-checkstand",
        "icon-e-free",
        "icon-e-aviation",
        "icon-e-cad-fill",
        "icon-e-Daytimemode",
        "icon-e-robot",
        "icon-e-infantmom",
        "icon-e-inspection1",
        "icon-e-discounts",
        "icon-e-invoice",
        "icon-e-insurance",
        "icon-e-nightmode",
        "icon-e-usercenter",
        "icon-e-unlock",
        "icon-e-vip",
        "icon-e-wallet",
        "icon-e-landtransportation",
        "icon-e-voice",
        "icon-e-exchangerate",
        "icon-e-contacts-fill",
        "icon-e-add-account1",
        "icon-e-years-fill",
        "icon-e-add-cart-fill",
        "icon-e-add-fill",
        "icon-e-all-fill1",
        "icon-e-ashbin-fill",
        "icon-e-calendar-fill",
        "icon-e-bad-fill",
        "icon-e-bussiness-man-fill",
        "icon-e-atm-fill",
        "icon-e-cart-full-fill",
        "icon-e-cart-Empty-fill",
        "icon-e-cameraswitching-fill",
        "icon-e-atm-away-fill",
        "icon-e-certified-supplier-fill",
        "icon-e-calculator-fill",
        "icon-e-clock-fill",
        "icon-e-ali-clould-fill",
        "icon-e-color-fill",
        "icon-e-coupons-fill",
        "icon-e-cecurity-protection-fill",
        "icon-e-credit-level-fill",
        "icon-e-auto",
        "icon-e-default-template-fill",
        "icon-e-all",
        "icon-e-CurrencyConverter-fill",
        "icon-e-bussiness-man",
        "icon-e-Customermanagement-fill",
        "icon-e-component",
        "icon-e-discounts-fill",
        "icon-e-code",
        "icon-e-Daytimemode-fill",
        "icon-e-copy",
        "icon-e-exl-fill",
        "icon-e-dollar",
        "icon-e-cry-fill",
        "icon-e-history",
        "icon-e-email-fill",
        "icon-e-editor",
        "icon-e-filter-fill",
        "icon-e-data",
        "icon-e-folder-fill",
        "icon-e-gift",
        "icon-e-feeds-fill",
        "icon-e-integral",
        "icon-e-gold-supplie-fill",
        "icon-e-nav-list",
        "icon-e-form-fill",
      ],
    };
  },
};
</script>

<style lang="stylus" scoped>
.iconList {
  list-style: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid #eaeefb;
  border-radius: 4px;

  li {
    float: left;
    width: 16.66%;
    text-align: center;
    height: 120px;
    color: #99a9bf;
    font-size: 13px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-right: -1px;
    margin-bottom: -1px;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      .icon {
        span {
          color: #5cb6ff;
        }
      }

      .name {
        color: #5cb6ff;
      }
    }
  }
}
</style>
